<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小球跳动</title>
	
</head>
<body>


    <canvas id="mycanvas" width="400" height="300" style="border: 1px solid red"></canvas>  
    
	
</body>
</html>
<script type="text/javascript">
    var box = document.getElementById('mycanvas');
    var cxt = box.getContext("2d");

    //定义一个球类对象
    var ball = {x:10,y:100,dir_x:5,dir_y:5};

    drawBall();
    function drawBall(){
        
        cxt.fillStyle="white";
        cxt.fillRect(0,0,400,300);
        cxt.beginPath();
        cxt.fillStyle="green";
        cxt.arc(ball.x,ball.y,10,0,Math.PI*2,true);
        cxt.fill();
        
        //让我们的球动起来
        ball.x+=ball.dir_x;
        ball.y+=ball.dir_y;
        //判断方向
        if(ball.x<0||ball.x>=400){
            ball.dir_x*=-1;
        }
        if(ball.y<0||ball.y>=300){
            ball.dir_y*=-1;
        }
        setTimeout("drawBall()",10);
    }



</script>
